<template>
	
	<view id="event-details">
		<view id="event-de-name">
			<text>{{thisCptt.name}}[{{CodeToType[thisCptt.type]}}]</text>
		</view>
		
		<view id="event-de-main">
			<view id="edm-introduction">
				<view class="edm-title">
					<text>活动介绍</text>
					<hr >
				</view>
				<view
				class="edm-content"
				v-html="thisCptt.info"
				style="text-indent:1em"
				>
				</view>
				<u-button
				class="applaybtn"
				type="primary"
				:plain="isApplay?true:false"
				ripple
				@click="apply"
				>
					{{!isApplay?'点击报名':'取消报名'}}
				</u-button>
			</view>
			<view id="edm-time">
				<view class="edm-title">
					<text>活动时间</text>
					<hr >
				</view>
				<view class="edm-content" style="text-align: center;">
					<text>即日起-</text>
					<text>{{endtime.getMonth()+1 + "月" + endtime.getDate() + "日"}}</text>
				</view>
			</view>
			<view id="edm-requirements">
				<view class="edm-title">
					<text>报名要求</text>
					<hr >
				</view>
				<view class="edm-content">
					<text class="eng-font">you only need to</text>
					<br>
					<text v-for="i in 3">
						<text>&nbsp;&nbsp;&nbsp;&nbsp;</text>
						<text>{{new Array(40).join("☹")}}</text>
						<br>
					</text>
				</view>
			</view>
			<view id="edm-apply">
				<view class="edm-title">
					<text>报名方式</text>
					<hr >
				</view>
				<view class="edm-content">
					<u-notice-bar 
					mode="vertical" 
					no-list-hidden
					type="primary"
					:list="applayName.map(e=>e+' 已报名')">
					</u-notice-bar>
					<view class="ch-font">请点击下方报名按钮，填写基本信息进行报名。核实信息无误后将报名成功</view>
					<view class="edm-apply-btn">
						<u-button
						class="applaybtn"
						type="primary"
						:plain="isApplay?true:false"
						ripple
						@click="apply"
						>
							{{!isApplay?'点击报名':'取消报名'}}
						</u-button>
					</view>
					<text class="ch-font">如有其他问题请联系:</text>
					<a href="mqqwpa://im/chat?chat_type=wpa&uin=821783496&version=1">QQ:821783496</a>
				</view>
			</view>
		</view>
		<u-modal 
		v-model="show"
		title="未登录"
		content="是否去登录?"
		show-cancel-button
		@confirm="toLogin"
		@cancel="show = false"
		></u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
  // import { Toast } from 'vant'
  // import { Dialog } from 'vant';
  // import { mapGetters,mapActions } from 'vuex'
  import { timeSleep } from '@/util/Functions'
  import { 
    getEvent,
    getApplay,
    applayCptt,
    getmygroup,
    getIsApplay,
   } from '@/api/cpttApis'
  import { CodeToType } from '@/conf'
	export default {
		data() {
			return {
				CodeToType:Object.freeze(CodeToType),
				thisCptt:{name:"loading"},
				applayName:[],
				isApplay:false,
        id:null,
        show:false,
			}
		},
		onLoad(options) {
			const id = options.id
			this.id = id
			this.getApplayInfo()
		},
		onPullDownRefresh() {
			setTimeout(async ()=>{
				//测试=>全部刷新
				await getApp().getCptts();
				await this.getApplayInfo()
			},500)
		},
		methods: {
			async apply(){
        console.log()
        if(!this.$store.getters.token){
          this.show = true
          return
        }
        // show()
			  console.log(this.cptype)
			  const { cptype,thisCptt:{id:cpid} } = this
			  console.log({cptype,cpid})
			  if(cptype){//组队
			    await this.zudui(cpid)
			  }else{//个人
			    await applayCptt({cptype,cpid})
			    this.isApplay = true
			    this.$message.success("报名成功")
			  }
			},
      async cancel(){
        this.$message.warning("没写")
      },
      async zudui(cpid){
        await this.$prompt('请输入组队码','报名比赛', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^\d{8}$/,
          inputErrorMessage: '组队码只能是八位数字'
        }).then(async ({ value:keycode }) => {
          const { groups } = await getIsApplay({cpid,keycode})
          if(!groups.length) await this.mackGroup(cpid,keycode)
          else await this.addGroup(cpid,keycode,groups)
          console.log({groups})
          // this.isApplay = [groups[0],groups[1],groups[2]]
          this.$message.success("报名成功")
        }).catch(e => {
          console.log(e)
        })
      },
      async mackGroup(cpid,keycode){
        await this.$confirm(`未找到队伍,自己创建?[${keycode}]`,'创建队伍', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(async()=> {
          await applayCptt({cptype:true,cpid,make:true,keycode})
        })
      },
      async addGroup(cpid,keycode,groups){
        console.log({groups})
        await this.$confirm(`加入队伍\n${groups.map(e=>e.name).join(",")}`,'加入队伍',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(async()=> {
          await applayCptt({cptype:true,cpid,make:false,keycode})
        })
      },
			async getApplayInfo(){
				uni.showLoading()
				await timeSleep(1000)
				const { id } = this
				const { cptt } = await getEvent({id})
				this.thisCptt = cptt
				const { applays } = await getApplay({id})
				let isApplay = applays.map(e=>e.u_id).includes(this.$store.getters.uid)
				if(cptt.type%10 && isApplay){
				  const {groups} = await getmygroup({id})
				  isApplay = [groups[0],groups[1],groups[2]]
				}
				console.log({isApplay})
				this.isApplay = isApplay
				uni.hideLoading()
			},
			toLogin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
		},
		computed:{
			endtime(){
				return new Date(this.thisCptt.overtime)
			},
		}
	}
</script>

<style lang="scss" scoped>
#event-details{
		position: absolute;//title需要
		#event-de-name{
			font-size: 40rpx;
			font-weight: 700;
      text-align: center
    }
		#event-de-main{
			// margin-top: 30px;
			margin-bottom: 70rpx;
			// height: 100%;
			#edm-introduction,
			#edm-time,
			#edm-requirements,
			#edm-apply
			{
				display: flex;
				flex-flow: column nowrap;
				align-items: center;
				// text-align: center;
				margin-top: 1.875rem;
				hr,>view{
					width: 80%;
				}
				.edm-content{ //活动介绍-内容
					margin-top: 1.25rem;
					margin-bottom: 1.25rem;
					box-sizing: border-box;
					min-height: 5.75rem;
					padding: 20rpx;
					border: solid 3px #26A2FF;
					box-shadow: 5px 5px 5px #888888;
				}
				
			}
			.edm-title{ //活动介绍
				display: flex;
				flex-direction: column;
				align-items: center;
				text{
					font-size: 1.25rem;
					color:#ffffff;
					text-shadow: 1px 1px #26A2FF,
								 -1px -1px #26A2FF, 
								 1px -1px #26A2FF, 
								 -1px 1px #26A2FF; 
				}
				hr{
					height: 0.125rem;
					border: none;
					background-color: #26A2FF;
				}
			}
			.eng-font{
				font-family: 'Dancing Script', cursive;
				font-size: 1.55rem;
				margin:0px 0px 5px 0px;
				color: #FFFFFF;
				text-shadow: 1px 1px #26A2FF,
							 -1px -1px #26A2FF, 
							 1px -1px #26A2FF, 
							 -1px 1px #26A2FF;
			}
			.ch-font{
				font-size: 1rem;
				color: #268cff;
				margin: 0;
			}
			.applaybtn{
				width: 300rpx;
				height: 40px;
			}
		}
	}
</style>
